<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jsonp制作百度</title>
		<style>
			div,p,ul,li,ol,dt,dd{margin: 0;padding: 0;}
			li{list-style: none;}
			#box{
				width:592px;
				margin: 0 auto;
				-webkit-user-select: none;
			}
			#baidulogo{
				display: block;
				margin: 0 auto;
				margin-top: 95px;
			}
			.insert{
				width:592px;
				height: 40px;
    			line-height: 40px;
				margin: 0 auto;
				display: -webkit-flex;
			}
			#searchTxt{
				width: 480px;
				height: 20px;
				line-height: 20px;
				border: 1px solid #b8b8b8;
				border-right: 0;
				padding: 9px 7px;
				border-bottom: 1px solid #ccc;
				font: 16px arial;
			}
			#submitBtn{
				width: 108px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background: #38f;
				color: #fff;
				border: none;
				outline: none;
				font-size: 16px;
				cursor: pointer;
			}
			#submitBtn:hover{
				background:#317ef3;
			}
			#ul{
				width:484px;
				border: 1px solid #ccc;
				border-top: none;
				color: #7A77C8;
			}
			#ul li{
				padding-left: 8px;
				line-height: 30px;
			}
			#ul li:hover{
				background: #e7e7e7;
			}
		</style>
	</head>
	<body>
		<div><a href="360.html">跳到360例子</a></div>
		<div id="box">
			<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" id="baidulogo" width="270" height="129"/>
			<div class="insert"spellcheck="false">
				<input type="text" name="" id="searchTxt" value="" />
				<input type="submit" name="submitBtn" id="submitBtn" value="百度一下" />
			</div>
			<ul id="ul">
						
			</ul>
		</div>
		<script type="text/javascript">
			searchTxt.onkeyup=function(){
				var val = this.value;
				var os = document.createElement('script');
				os.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+val+'&cb=callback';
				document.body.appendChild(os);
				os.onload = function(){
					document.body.removeChild(os)
				}
			}
			function callback(msg){
				var s = msg.s;
				ul.innerHTML=" ";
				for(var key in s){
					var li = document.createElement('li');
					li.innerHTML=s[key];
					ul.appendChild(li)
				}
			}
			ul.onclick= function(e){
				var This = e.target||window.Element.target
				if (/li/i.test(e.target.nodeName))window.open("https://www.baidu.com/s?wd="+This.innerHTML)	
			}
		</script>
	</body>
</html>
